<template>
  <!-- 托育收入管理 -->
  <div class="nurseryMngPage">
    <div class="commonHead">
      <!--  tag菜单组件, 此处传参需要调整，参考资源库 -->
      <IncomeTagMenu projectName="业财管控" />
    </div>
    <div class="content">
      <div class="header">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="资产筛选">
            <el-select
              class="w-138"
              v-model="formInline.type"
              placeholder="全部"
            >
              <el-option
                v-for="item in formInline.typeOptionsArr"
                :key="item.parkId"
                :label="item.parkName"
                :value="item.parkId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="租赁周期筛选">
            <!-- <el-input
              class="w-182"
              v-model="formInline.datarange"
              placeholder="Approved by"
            /> -->

            <el-date-picker
              v-model="formInline.dateVal"
              type="daterange"
              range-separator="——"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              size="large"
            />
          </el-form-item>
          <el-form-item label="搜索">
            <el-input
              v-model="formInline.searchVal"
              placeholder="请输入资产或客户名"
            />
          </el-form-item>
          <el-button
            color="#FF7B50"
            style="color: #fff"
            type="primary"
            @click="doSearch"
            >查看</el-button
          >
          <el-button color="#F0F0F0" @click="doReset">重置</el-button>
          <el-button
            plain
            color="#FF7B50"
            :icon="RefreshLeft"
            @click="doRefresh"
            >刷新</el-button
          >
          <el-button
            class="f-r"
            plain
            color="#FF7B50"
            :icon="Download"
            @click="exportPlanBtn"
            >导出Excel表格</el-button
          >
          <el-button
            class="f-r"
            plain
            color="#FF7B50"
            :icon="Download"
            @click="importPlanBtn"
            >批量导入</el-button
          >
        </el-form>
      </div>
      <div class="dateCard">
        <div class="itemCard" v-for="(n, i) in cardInfo.cardArr" :key="i">
          <div class="cardTitle">{{ n.title }}</div>
          <div class="cardInfo">
            <div class="moneyBox">
              {{ n.num }} <span>({{ n.unit }})</span>
            </div>
            <img :src="n.url" alt="" />
            <!-- <img v-if="i == 0" src="@/assets/iconImg/kehu.png" alt="" />
            <img v-else-if="i == 1" src="@/assets/iconImg/jiaofei.png" alt="" />
            <img v-else-if="i == 2" src="@/assets/iconImg/chuqin.png" alt="" />
            <img v-else src="@/assets/iconImg/koukuan.png" alt="" /> -->
          </div>
        </div>
      </div>
      <el-table
        v-loading="state.loading"
        ref="multipleTable"
        :data="state.tableData"
        tooltip-effect="dark"
        style="width: 100%; margin-bottom: 23px"
      >
        <el-table-column prop="index" label="序号" align="center">
        </el-table-column>
        <el-table-column
          prop="name1"
          label="所属资产"
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="className"
          label="所在班级"
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="customerName"
          label="幼儿姓名(客户)"
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="guardianPhone"
          label="监护人手机号"
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="admissionTime"
          label="入园时间"
          width="110"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="childcareType"
          label="托育类型"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="cycleDate"
          label="托育周(期间)"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="realTotalFee"
          label="交易金额(元)"
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name9"
          label="扣费标准(元/月)"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="requiredAttendanceDays"
          label="应计满勤总天数"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name11"
          label="实际出勤天数"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="requiredTotalFee"
          label="应扣总额(元)"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column label="操作" width="100" align="center" fixed="right">
          <template #default="scope">
            <el-button
              color="#FF7B50"
              style="color: #fff; width: 68px; height: 31px"
              type="primary"
              @click="goDetails(scope.row.customerId)"
              >详情</el-button
            >
          </template>

          <!-- <template #default="scope">
                        <a style="cursor: pointer; margin-right: 10px" @click="handleEdit(scope.row.categoryId)">修改</a>
                        <a style="cursor: pointer; margin-right: 10px" @click="handleNext(scope.row)">下级分类</a>
                        <el-popconfirm
                            title="确定删除吗？"
                            confirmButtonText='确定'
                            cancelButtonText='取消'
                            @confirm="handleDeleteOne(scope.row.categoryId)"
                        >
                            <template #reference>
                            <a style="cursor: pointer">删除</a>
                            </template>
                        </el-popconfirm>
                    </template> -->
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:page-size="defualtPageSize"
        :total="state.total"
        :page-sizes="[15, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="state.currentPage"
        @current-change="currentPageChange"
        @size-change="sizeChange"
      />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import {
  ElForm,
  ElFormItem,
  ElTable,
  ElTableColumn,
  ElSelect,
  ElOption,
  ElIcon,
  ElPagination,
  ElTag,
  ElDatePicker,
} from "element-plus";
import { RefreshLeft, Download } from "@element-plus/icons-vue";
import { numToFixed } from "@/common/utils/GlobalUtils";
import IncomeTagMenu from "@/components/IncomeTagMenu.vue";
import { useRouter } from "vue-router";
import { childcareApi } from "@/api/property";
const router = useRouter();

const formInline = reactive({
  type: "",
  dateVal: "",
  searchVal: "",
  typeOptionsArr: [],
});
const doSearch = () => {
  initData();
};
const doReset = () => {
  formInline.type = "";
  formInline.dateVal = "";
  formInline.searchVal = "";
  formInline.typeOptionsArr = [];
  state.currentPage = 1;
  defualtPageSize.value = 50;
  initData();
};
const doRefresh = () => {
  initData();
};
const exportPlanBtn = () => {};
const importPlanBtn = () => {};
const defualtPageSize = ref(50);
const state = reactive({
  loading: false,
  tableData: [],
  total: 0, // 总条数
  currentPage: 1, // 当前页
  pageSize: 10, // 分页大小
});

const goDetails = (id) => {
  router.push({ path: "/industry/income/nursery/details", query: { id } });
};
const currentPageChange = (val) => {
  state.currentPage = val;
  initTableData();
};
const sizeChange = (val) => {
  defualtPageSize.value = val;
  initTableData();
};

const initData = () => {
  const params = {
    pageNum: state.currentPage,
    pageSize: defualtPageSize.value,
    param: {
      queryName: formInline.searchVal,
      parkId: formInline.type,
      // startTime: formInline.dateVal[0] || '',
      // endTime: formInline.dateVal[1] || ''
      startTime:
        formInline.dateVal === null || formInline.dateVal[0] === undefined
          ? ""
          : formInline.dateVal[0],
      endTime:
        formInline.dateVal === null || formInline.dateVal[1] === undefined
          ? ""
          : formInline.dateVal[1],
    },
  };
  initTableData(params);
  initStatisData(params);
};

const initTableData = (params) => {
  childcareApi.getTableData(params).then((res) => {
    const { code, data } = res;
    if (code == 200) {
      state.tableData = data.content.map((n, i) => {
        n.index = i + 1;
        return n;
      });
      state.total = data.totalSize;
    }
  });
};

const cardInfo = reactive({
  cardArr: [
    {
      title: "客户总数",
      num: "--",
      url: require("@/assets/iconImg/diya.png"),
      unit: "个",
    },
    {
      title: "缴费总额",
      num: "--",
      url: require("@/assets/iconImg/zujin.png"),
      unit: "元",
    },
    {
      title: "出勤人数",
      num: "--",
      url: require("@/assets/iconImg/zujin.png"),
      unit: "个",
    },
    {
      title: "扣款总额",
      num: "--",
      url: require("@/assets/iconImg/wuye.png"),
      unit: "元",
    },
  ],
});
const initStatisData = (params) => {
  childcareApi.getStatistics(params).then((res) => {
    const { code, data } = res;
    if (code == 200) {
      cardInfo.cardArr[0].num = numToFixed(data.customerNum).split("&")[0];
      if (numToFixed(data.customerNum).split("&")[1])
        cardInfo.cardArr[0].unit =
          numToFixed(data.customerNum).split("&")[1] + "个";

      cardInfo.cardArr[1].num = numToFixed(data.dealTotalAmount, 2).split(
        "&"
      )[0];
      if (numToFixed(data.dealTotalAmount, 2).split("&")[1])
        cardInfo.cardArr[1].unit =
          numToFixed(data.dealTotalAmount, 2).split("&")[1] + "元";

      cardInfo.cardArr[2].num = numToFixed(data.attendanceTotalNum).split(
        "&"
      )[0];
      if (numToFixed(data.attendanceTotalNum).split("&")[1])
        cardInfo.cardArr[2].unit =
          numToFixed(data.attendanceTotalNum).split("&")[1] + "个";

      cardInfo.cardArr[3].num = numToFixed(data.realTotalFee, 2).split("&")[0];
      if (numToFixed(data.realTotalFee, 2).split("&")[1])
        cardInfo.cardArr[3].unit =
          numToFixed(data.realTotalFee, 2).split("&")[1] + "元";
    }
  });
};

// 获取资产筛选选项
const initTypeOptions = () => {
  childcareApi.getTypeOptions().then((res) => {
    console.log(res);
    const { code, data } = res;
    if (code == 200) {
      formInline.typeOptionsArr = data;
    }
  });
};

onMounted(() => {
  initTypeOptions();
  initData();
});
</script>

<style lang="scss" scoped>
.nurseryMngPage {
  .w-182 {
    width: 182px;
  }
  .w-135 {
    width: 135px;
  }
  .w-138 {
    width: 138px;
  }
  .h-40 {
    height: 40px;
  }
  .commonHead {
  }
  .content {
    .header {
      margin-bottom: 38px;
      .el-form {
        .el-form-item {
          margin-bottom: 0;
        }
      }
    }
    .dateCard {
      margin-bottom: 39px;
      display: flex;
      justify-content: space-around;
      .itemCard {
        width: 332px;
        height: 128px;
        background: #ffffff;
        box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.05);
        border-radius: 20px;
        padding: 18px 28px;
        .cardTitle {
          font-size: 18px;
          margin-bottom: 26px;
          color: $title-big-color;
        }
        .cardInfo {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .moneyBox {
            font-size: 36px;
            font-weight: bold;
            color: $title-big-color;
            span {
              font-size: 14px;
              color: #808080;
            }
          }
          img {
            width: 40px;
            height: 40px;
          }
        }
      }
    }
    .tagStyle {
      width: 34px;
      height: 31px;
    }
  }
}
</style>
